import React from 'react'
import { Card,Popover,Statistic } from 'antd';
import { QuestionCircleOutlined,ArrowUpOutlined, ArrowDownOutlined } from '@ant-design/icons';

export default function GoodsAmount(props) {
  const {title,tip}=props

  const content =(
    <div>
      {tip}
    </div>
  )
  return (
    <Card title={title} extra={tip?(
      <Popover placement="topLeft" title={'提示'} content={content} trigger="click">
        <QuestionCircleOutlined />
      </Popover>):(<></>)} style={{ width: 300 }}>
        <Statistic title="" value={112893} valueStyle={{fontSize:'36px'}}/>
        <Statistic
          title="周同比"
          value={7.38}
          precision={2}
          valueStyle={{ color:'#aa0000',fontSize:'20px',display:'inline-block' }}
          prefix={<ArrowDownOutlined />}
          suffix="%"
        />
        <Statistic
          title="日同比"
          value={12.28}
          precision={2}
          valueStyle={{ color:'#3f8600',fontSize:'20px' }}
          prefix={<ArrowUpOutlined />}
          suffix="%"
        />
    </Card>
  )
}
